import { Table, Space } from "antd";
import { useEffect, useState } from "react";
import { getProductById } from "../../../../utils/sendRequst";
const OrderProBox = (props) => {
  useEffect(() => {
    getProductById({ id: props.id }).then((res) => {
      let arr = res.data.map((item) => {
        item.key = item.productID;
        return item;
      });
      setDataSource(arr);
    });
  }, []);
  let [dataSource, setDataSource] = useState([]);
  const columns = [
    {
      title: "商品名称",
      dataIndex: "productName",
      key: "productName",
    },
    {
      title: "商品单价",
      dataIndex: "productPrice",
      key: "productPrice",
    },
    {
      title: "商品颜色",
      dataIndex: "productColor",
      key: "productColor",
    },
    {
      title: "商品图片",
      dataIndex: "productUrl",
      key: "productUrl",
      render: (_, record) => (
        <Space size="middle">
          <img src={"/api" + record.productUrl} alt="" className="productImg" />
        </Space>
      ),
    },
  ];
  return <Table dataSource={dataSource} columns={columns} pagination={false} />;
};
export default OrderProBox;
